

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/ext.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3564966_a6tt4yhnzge.css" media="all">
    <link rel="stylesheet" href="../plugins/toastr/toastr.min.css?v=${.Config.basic.version}">
    <style>

    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span></span>
                    <div class="layui-btn-group layuiadmin-btn-group">
                        <a href="javascript:add();" class="layui-btn layui-btn-normal layui-btn-xs layui-hide action-edit">新增字典</a>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="tree-div scroll">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs9">
            <div class="layui-card">
                <div class="layui-card-header "><span class="title"></span><a href="javascript:location.reload();" title="刷新">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                </a></div>
                <div class="layui-card-body">
                    <div class="tree-div scroll">
                        <form class="layui-form " lay-filter="func-form" id="func-form" style="padding: 20px 30px 0 0;">
                            <div class="layui-form-item layui-hide" for="id">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                    <input name="id" lay-filter="id" lay-verify="" lay-search="">
                                </div>
                            </div>
                            <div class="layui-form-item key" for="pid">
                                <label class="layui-form-label">所属字典</label>
                                <div class="layui-input-inline">
                                    <select name="pid" lay-filter="pid" lay-verify="" lay-search="">
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item item " for="code">
                                <label class="layui-form-label">编码</label>
                                <div class="layui-input-inline">
                                    <input type="text"  name="code"  placeholder="请输入编码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item" for="data_text">
                                <label class="layui-form-label">文本</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="data_text"  placeholder="请输入文本标签" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item key " for="data_value">
                                <label class="layui-form-label">键值</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="data_value" lay-verify="" placeholder="请输入键值" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item" for="order">
                                <label class="layui-form-label">排序号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="order" lay-verify="required|number" placeholder="排序号" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-tips layui-text-dark" lay-tips="注意:越小优先级越高 范围0-999" lay-offset="1"></i></div>
                            </div>
                            <div class="layui-form-item key" for="default_select">
                                <label class="layui-form-label">默认</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox"  name="default_select" lay-skin="primary" lay-filter="switch-type" title="" >
                                </div>
                                <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-tips layui-text-dark" lay-tips="注意:默认选中项" lay-offset="1"></i></div>
                            </div>
                            <div class="layui-form-item" for="status">
                                <label class="layui-form-label">有效</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox"  name="status" lay-skin="switch" lay-filter="switch-type" title="" lay-text="有效|无效" checked>
                                </div>
                            </div>
                            <!--<div class="layui-form-item" for="ele_type">
                                <label class="layui-form-label">控件类型</label>
                                <div class="layui-input-inline">
                                    <select name="ele_type" lay-filter="ele_type" lay-verify="" lay-search="">
                                        <option value="">无</option>
                                        <option value="select">下拉选择框</option>
                                        <option value="checkbox">复选框</option>
                                        <option value="switch">开关</option>
                                        <option value="radio">单选框</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item" for="ele_class">
                                <label class="layui-form-label">控件Class</label>
                                <div class="layui-input-block">
                                    <input type="text" name="ele_class" lay-verify="" placeholder="如class='abc'这里填写abc" autocomplete="off" class="layui-input" >
                                </div>
                            </div>

                            <div class="layui-form-item" for="ele_style">
                                <label class="layui-form-label">控件Style</label>
                                <div class="layui-input-block">
                                    <textarea name="ele_style" lay-verify="" placeholder="如style='aaa'这里填写aaa" class="layui-textarea"></textarea>
                                </div>
                            </div>-->




                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="submit" class="layui-btn layui-btn-normal layui-hide action-edit" lay-submit="" lay-filter="btn_save" id="btn_save">保存</button>
                                    <button type="submit" class="layui-btn  action-edit layui-hide" lay-submit="" lay-filter="btn_add" id="btn_add">新增</button>
                                    <button type="reset" id="btn_cancel" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>



<script src="../plugins/layui/layui.js"></script>
<script src="../plugins/jquery/jquery-3.6.0.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.core.min.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.excheck.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.exedit.js?v=${.Config.basic.version}"></script>
<script>
    var zTree=null;
    var table=null;
    var form=null;
    var Table=null;

    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var func_url="${.func_url}";
    var actions=[];
    var token = window.localStorage.getItem("token");
    token = 'Bearer ' + token;


    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form'], function(){
        $ = layui.$;
        form = layui.form;
        table = layui.table;

        $.ajax({
            type: 'GET',
            url: '/Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        var tree_setting = {
            view: {
                dblClickExpand: false,
                fontCss: getFont,
                nameIsHTML: true,
                //addHoverDom: addHoverDom,
                //removeHoverDom: removeHoverDom,
                addDiyDom:addDiyDom
            },
            callback: {
                onClick: treeOnClick
            },
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false,
                drag:{
                    autoExpandTrigger: false,
                    isCopy: false,
                    prev: false,
                    next: false,
                    inner: false
                }
            },
            data: {
                key:{
                    name:"data_text",
                    title:"data_text"
                },
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'pid',
                    rootPId: null
                }
            }
        };
        function getFont(treeId, node) {
            return node.font ? node.font : {};
        }

        function addDiyDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' nodeid='"+treeNode.tId+"' id='addBtn_" + treeNode.tId
                + "' title='新增' onfocus='this.blur();'></span>";

            var removeStr = "<span class='button remove' nodeid='"+treeNode.tId+"' id='removeBtn_" + treeNode.tId
                + "' title='删除' onfocus='this.blur();'></span>";

            if(treeNode.pid==null||treeNode.pid==0){
                //字典
                sObj.after(removeStr);
                sObj.after(addStr);
            }else{
                //字典项
                sObj.after(removeStr);
            }

            var btn = $("#removeBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(event){
                var tid=$(this).attr("nodeid");
                var node = zTree.getNodeByTId(tid);
                layer.confirm('确认删除'+node.data_text+"?", function(index){
                    layer.close(index);
                    $.ajax({
                        type: 'DELETE',
                        url: '/Api/Dictionary',
                        data: {rid:node.id},
                        beforeSend: function(request) {
                            request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                        },
                        dataType: "json",
                        success: function (data) {
                            //console.info(data)
                            if(data.code>=0){
                                layer.msg('删除成功');
                                window.location.reload();
                            }else{
                                layer.alert('删除失败:'+data.msg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert('删除失败');
                        }
                    });
                });

                return false;
            });

            //sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function (event) {
                var tid = $(this).attr("nodeid");
                var node = zTree.getNodeByTId(tid);
                if (node.pid > 0) {
                    layer.alert("无法在当前节点添加，请在上一级添加。")
                    return false;
                }

                $("input[name='id']").removeAttr("disabled");
                $('#btn_add').removeClass("layui-hide");
                $('#btn_save').addClass("layui-hide");
                displayItem();

                $("#btn_cancel").click();
                $('.title').html("新增");
                //console.info(node);

                form.val("func-form", {
                    pid: node.id,
                });

                return false;
            });


        };
        function removeHoverDom(treeId, treeNode) {
            $("#removeBtn_"+treeNode.tId).unbind().remove();
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };
        function treeOnClick(event, treeId, treeNode) {
            //编辑模式
            $("input[name='id']").attr("disabled","");
            $('#btn_add').addClass("layui-hide");
            $('#btn_save').removeClass("layui-hide");
            if(treeNode.pid==null||treeNode.pid==0){
                //字典
                displayDictionary();

            }else{
                //字典项
                displayItem();
            }
            //form.render(); //更新全部

            $.ajax({
                type: 'GET',
                url: '/Api/Dictionary',
                data: {id:treeNode.id},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data);
                    if(data.data.length>0){
                        var obj={};
                        obj['id']=data.data[0].id;
                        obj['pid']=data.data[0].pid;
                        obj['code']=data.data[0].code;
                        obj['data_value']=data.data[0].data_value;
                        obj['data_text']=data.data[0].data_text;
                        obj['data_remark']=data.data[0].data_remark;
                        obj['order']=data.data[0].order;
                        obj['status']=data.data[0].status;
                        obj['default_select']=data.data[0].default_select==1?true:false;
                        obj['ele_type']=data.data[0].ele_type;
                        //console.info(obj);
                        $('.title').html("修改 【"+obj.data_text+"】");
                        form.val("func-form", obj);
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                }

            });
        }
        //监听提交
        form.on('submit(btn_save)', function(data){
            var field = data.field; //获取提交的字段
            if(field.default_select=='on'){
                field.default_select=1;
            }else{
                field.default_select=0;
            }
            if(field.status=='on'){
                field.status=1;
            }else{
                field.status=0;
            }
            if(field.pid==null||field.pid==""){
                field.pid=0;
            }

            $.ajax({
                type: 'PUT',
                url: '/Api/Dictionary',
                data: field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code>=0){
                        layer.msg('保存成功');
                    }else{
                        layer.alert('保存失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('保存失败');
                }
            });
            return false;
        });
        form.on('submit(btn_add)', function(data){
            var field = data.field; //获取提交的字段
            if(field.default_select=='on'){
                field.default_select=1;
            }else{
                field.default_select=0;
            }
            if(field.status=='on'){
                field.status=1;
            }else{
                field.status=0;
            }
            if(field.pid==null||field.pid==""){
                field.pid=0;
            }
            $.ajax({
                type: 'POST',
                url: '/Api/Dictionary',
                data: field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code>=0){
                        layer.msg('保存成功');
                        window.location.reload();
                    }else{
                        layer.alert('保存失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('保存失败');
                }
            });
            return false;
        });

        $.ajax({
            type: 'GET',
            url: '/Api/Dictionary',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                for(var i=0;i<data.data.length;i++){
                    if(data.data[i].pid==0||data.data[i].pid==null){
                        data.data[i]["icon"]="/img/net_group_green.png";
                    }else{
                        data.data[i]["icon"]="/img/ne_green.png";
                    }
                }

                zTree = $.fn.zTree.init($("#treeDemo"), tree_setting, data.data);
                zTree.expandAll(true);
                //下拉框
                var dics=data.data;
                var html="<option value=\"\">选择</option>";
                for(var i=0;i<dics.length;i++){
                    if(dics[i].pid==0){
                        html+="<option value=\""+dics[i].id+"\">"+dics[i].data_text+"</option>";
                    }
                }
                $("select[name='pid']").html(html);
                form.render('select');
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载信息失败');
            }

        });
        resizeElement();

        displayDictionary();
    });

    function displayDictionary() {
        $("div[for='pid']").addClass("layui-hide");
        $("select[name='pid']").attr("disabled");//不能选

        $("div[for='code']").removeClass("layui-hide");
        $("input[name='code']").removeAttr("disabled","");

        $("div[for='data_value']").addClass("layui-hide");
        $("input[name='data_value']").attr("disabled","");

        $("div[for='ele_type']").removeClass("layui-hide");
        $("select[name='ele_type']").removeAttr("disabled");

        $("div[for='ele_class']").removeClass("layui-hide");
        $("input[name='ele_class']").removeAttr("disabled");

        $("div[for='ele_style']").removeClass("layui-hide");
        $("input[name='ele_type']").removeAttr("disabled");

        $("div[for='default_select']").addClass("layui-hide");
        $("input[name='default_select']").attr("disabled");
    }

    function displayItem() {
        $("div[for='pid']").removeClass("layui-hide");
        $("select[name='pid']").attr("disabled","");//不能选

        $("div[for='code']").addClass("layui-hide");
        $("input[name='code']").attr("disabled","");

        $("div[for='data_value']").removeClass("layui-hide");
        $("input[name='data_value']").removeAttr("disabled","");

        $("div[for='ele_type']").addClass("layui-hide");
        $("select[name='ele_type']").attr("disabled");

        $("div[for='ele_class']").addClass("layui-hide");
        $("input[name='ele_class']").attr("disabled");

        $("div[for='ele_style']").addClass("layui-hide");
        $("input[name='ele_type']").attr("disabled");

        $("div[for='default_select']").removeClass("layui-hide");
        $("input[name='default_select']").removeAttr("disabled");
    }

    function add(){
        $("input[name='id']").removeAttr("disabled");
        $('#btn_add').removeClass("layui-hide");
        $('#btn_save').addClass("layui-hide");

        displayDictionary()

        $("#btn_cancel").click();
        $('.title').html("新增");
        form.val("func-form", {
            pid:'',
            level:0
        });
    }

    $(window).resize(function () {
        //console.info('resize')
        resizeElement();
    });
    function resizeElement() {
        $('.tree-div').height($(window).height()-95);
    }

</script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>
</html>

